<template>
  <div>
    <div
      style="
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eceef4;
      "
    >
      <h3>商品分类</h3>
      <el-button type="primary" @click="funsort">添加分类</el-button>
    </div>
    <div>
      <el-table :data="list">
        <el-table-column type="index" width="50" label="序号" align="center">
        </el-table-column>
        <el-table-column label="分类名称" align="center">
          <template slot-scope="scope">
            <label v-show="!scope.row.isclickedit">{{
              scope.row.cateName
            }}</label>
            <el-input
              v-show="scope.row.isclickedit"
              v-model="scope.row.cateName"
            />
          </template>
        </el-table-column>
        <el-table-column label="按钮">
          <template slot-scope="aaa">
            <el-switch
              v-model="aaa.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :disabled="!aaa.row.isclickedit"
            >
            </el-switch>
          </template>
        </el-table-column>
        <!-- slot-scope="data" -->
        <el-table-column label="操作" align="center">
          <template slot-scope="data">
            <el-button size="mini" @click="funclickEdit(data.row)">{{
              data.row.isclickedit ? "完成" : "编辑"
            }}</el-button>
            <el-button size="mini" type="danger" @click="clickDel(data.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="block" style="margin-top: 20px">
      <el-pagination
        @current-change="pagechange"
        :page-size="pagesize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 蒙层框 -->
    <div class="meskBox" v-show="show">
      <div class="mesk">
        <div class="location" @click="funclick">×</div>
        <p style="margin-left: 45px; margin-top: 50px">
          分类名称：<el-input
            style="width: 230px"
            v-model="cateName"
          ></el-input>
        </p>
        <p style="margin-left: 45px; margin-top: 20px">
          <span>是否禁用</span>
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </p>
        <el-button
          type="primary"
          style="margin-left: 160px; margin-top: 30px"
          @click="funcate"
          >确认添加</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { addcate, gainsort, delsort, editcate } from "../../../apis/user";
export default {
  data() {
    return {
      pagesize: 4, //请求的条数
      total: 1, //总条数
      curpage: 1,
      value: true,
      list: [],
      show: false,
      cateName: "",
    };
  },
  methods: {
    //点击×
    funclick() {
      this.show = false;
    },
    //点击分类 显示
    funsort() {
      this.show = true;
    },

    //点击确认添加分类
    funcate() {
      addcate({ cateName: this.cateName, state: this.value }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: "恭喜你，添加成功",
            type: "success",
          });
          this.show = false;
        } else {
          alert("添加失败");
        }
        this.retable();
      });
    },
    pagechange(page) {
      this.curpage = page; //改变当前的月数
      this.retable();
    },
    //获取分类的数据
    retable() {
      gainsort({
        currentPage: this.curpage,
        pageSize: this.pagesize,
      }).then((res) => {
        for (let obj of res.data.data) {
          obj.state = obj.state == 1;
          obj.isclickedit = false; //此行数据是否已经点击了编辑
        }

        this.list = res.data.data;
        this.total = res.data.total;
        console.log(res);
      });
    },
    // 点击删除
    clickDel(id) {
      delsort({ id }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        }
        this.retable();
      });
      // console.log(res);
    },

    //点击编辑
    funclickEdit(row) {
      if (row.isclickedit) {
        editcate({ id: row.id, cateName: row.cateName, state: row.state }).then(res=>{
         if(res.data.code==0){
           console.log('数据修改成功');
         }
        });
      }
      row.isclickedit = !row.isclickedit; //当前点击行的数据
    },
  },

  created() {
    this.retable();
  },
};
</script>

<style lang="less">
.el-main[data-v-fae5bece] {
  line-height: 20px;
  text-align: left;
}
.meskBox {
  background-color: rgba(204, 204, 204, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mesk {
  width: 400px;
  height: 260px;
  background-color: #fff;
  position: relative;
  .location {
    position: absolute;
    top: 0;
    right: 12px;
    font-size: 30px;
  }
}
</style>